import {
  APP_BASE_INFO,
  APP_LAYOUT_HEADER_CONFIG,
  APP_LAYOUT_FOOTER_CONFIG,
  APP_LAYOUT_SIDEBAR_CONFIG,
  APP_LAYOUT_BODY_CONFIG,
  APP_THEME_CONFIG,
  APP_ROUTER_META_DEFAULT_CONFIG,
} from "@/config";
import { defineStore } from "pinia";
import { useRoute } from "vue-router";
import { computed, ref } from "vue";
import { localStorageWithNamespace } from "@/utils";

const storeSetup = () => {
  const headerHeight = APP_LAYOUT_HEADER_CONFIG.height;

  const footerHeight = APP_LAYOUT_FOOTER_CONFIG.height;

  /** 应用名称 */
  const name = ref(APP_BASE_INFO.name);

  /** 暗色主题 */
  const isDarkTheme = ref(false);

  /** 提取1级路由模块到HEADER */
  const extractLevel1ToHeader = ref(false);

  /** sidebar是否折叠 */
  const sidebarIsCollapse = ref(false);

  /**
   * sidebar是否有菜单
   * ----
   * 如果当前路由配置展示菜单 但是sidebar没有菜单 此处也隐藏sidebar
   * 功能驱动场景：配置 extractLevel1ToHeader 值为 true 的情况下
   */
  const sidebarHasMenus = ref(false);

  const sidebarWidth = computed(() => {
    return sidebarIsCollapse.value
      ? APP_LAYOUT_SIDEBAR_CONFIG.collapseWidth
      : APP_LAYOUT_SIDEBAR_CONFIG.width;
  });

  const route = useRoute();

  /** app主题配置 */
  const theme = computed(() =>
    isDarkTheme.value ? APP_THEME_CONFIG.dark : APP_THEME_CONFIG.light,
  );

  const pageLayout = computed(() => route.meta.layout);

  const keepAlive = computed(() => route.meta.keepAlive);

  const showHeader = computed(
    () => pageLayout.value?.header ?? APP_ROUTER_META_DEFAULT_CONFIG.showHeader,
  );

  const showFooter = computed(
    () => pageLayout.value?.footer ?? APP_ROUTER_META_DEFAULT_CONFIG.showFooter,
  );

  const showSidebar = computed(
    () =>
      (pageLayout.value?.sidebar ??
        APP_ROUTER_META_DEFAULT_CONFIG.showSidebar) &&
      sidebarHasMenus.value,
  );

  const showBreadcrumb = computed(
    () =>
      pageLayout.value?.breadcrumb ??
      APP_ROUTER_META_DEFAULT_CONFIG.showBreadcrumb,
  );

  /** bodyShimPadding(px) */
  const bodyShimPadding = computed(
    () =>
      pageLayout.value?.bodyShimPadding ?? APP_LAYOUT_BODY_CONFIG.shimPadding,
  );

  const headerStyle = computed(() => {
    return {
      height: `${showHeader.value ? headerHeight : 0}px`,
      backgroundColor: theme.value.bodyColor,
      color: theme.value.baseColor,
    };
  });

  const footerStyle = computed(() => {
    return {
      height: `${showFooter.value ? footerHeight : 0}px`,
      backgroundColor: theme.value.bodyColor,
    };
  });

  const sidebarStyle = computed(() => {
    return {
      width: `${showSidebar.value ? sidebarWidth.value : 0}px`,
      paddingTop: headerStyle.value.height,
      backgroundColor: theme.value.bodyColor,
      color: theme.value.baseColor,
    };
  });

  const bodyStyle = computed(() => {
    return {
      paddingLeft: sidebarStyle.value.width,
      paddingTop: headerStyle.value.height,
      backgroundColor: theme.value.bodyColor,
    };
  });

  const bodyShimStyle = computed(() => {
    return {
      minHeight: `calc(100vh - ${headerStyle.value.height} - ${footerStyle.value.height})`,
      padding: `${bodyShimPadding.value}px`,
    };
  });

  /** 改变sidebar折叠状态 */
  const changeSidebarCollapseStatus = (status: boolean) => {
    sidebarIsCollapse.value = status;
  };

  /** 改变sidebarHasMenus状态 */
  const changeSidebarHasMenusStatus = (status: boolean) => {
    sidebarHasMenus.value = status;
  };

  watch(
    isDarkTheme,
    () => {
      const currentCls = document.documentElement.className;
      if (isDarkTheme.value) {
        document.documentElement.className = `${currentCls} dark`.trim();
      } else {
        document.documentElement.className = currentCls
          .replace(/\bdark\b/g, "")
          .trim();
      }
    },
    {
      immediate: true,
    },
  );

  return {
    name,
    isDarkTheme,
    theme,
    extractLevel1ToHeader,
    showHeader,
    showFooter,
    showSidebar,
    showBreadcrumb,
    keepAlive,
    headerStyle,
    footerStyle,
    sidebarStyle,
    bodyStyle,
    bodyShimPadding,
    bodyShimStyle,
    sidebarIsCollapse,
    changeSidebarCollapseStatus,
    changeSidebarHasMenusStatus,
  };
};

export const useAppStore = defineStore("APP", storeSetup, {
  persist: {
    storage: localStorageWithNamespace,
    pick: ["isDarkTheme"],
  },
});
